<script setup lang="ts">
import { ref, computed } from "vue";
import { formatTimestamp } from "../utils/time";

// 定义停车记录数据接口
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  type: {
    type: Number,
    default: 1
  }
});

// 默认表格列配置
const defaultColumns = [
  {
    field: "parkMins",
    title: "停车时间"
  },
  {
    field: "parkAdr",
    title: "停车位置"
  },
  {
    field: "parkBte",
    title: "停车开始定位时间"
  },
  {
    field: "parkEte",
    title: "停车结束定位时间"
  },
  {
    field: "sParkBte",
    title: "停车开始系统时间"
  },
  {
    field: "sParkEte",
    title: "停车结束系统时间"
  },
  {
    field: "diffTime",
    title: "时间差"
  }
];

// 动态列配置 - 根据渠道类型过滤列
const DynamicColumns = computed(() => {
  // 复制默认列配置
  let columns = [...defaultColumns];

  // 如果是类型2，过滤掉系统时间和时间差列
  if (props.type === 2) {
    columns = columns.filter(item => item.field !== "sParkBte" && item.field !== "sParkEte" && item.field !== "diffTime");
  }

  return columns;
});

// 时间格式化方法
const formatTime = (timestamp: number) => {
  return formatTimestamp(timestamp);
};

// 格式化停车时长为 00时00分00秒 格式
const formatParkDuration = (minutes: number) => {
  const totalSeconds = Math.round(minutes * 60);
  const hours = Math.floor(totalSeconds / 3600);
  const mins = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  return `${hours.toString().padStart(2, "0")}时${mins.toString().padStart(2, "0")}分${seconds.toString().padStart(2, "0")}秒`;
};

const xParkListTable = ref();
const init = async () => {
  await xParkListTable.value?.reloadData(props.list);
};

defineExpose({ init });
</script>

<template>
  <div>
    <!-- vxe-table表格组件 -->
    <vxe-table
      ref="xParkListTable"
      border
      show-overflow="tooltip"
      :row-config="{ isCurrent: true, isHover: true }"
      height="250"
      :data="list"
      auto-resize
      empty-text="暂无数据"
    >
      <!-- 序号列 -->
      <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
      <!-- 动态生成的数据列 -->
      <vxe-table-column v-for="item in DynamicColumns" :key="item.field" :field="item.field" :title="item.title">
        <template #default="{ row }">
          <!-- 处理停车时间 -->
          <span v-if="['parkMins', 'diffTime'].includes(item.field)">
            {{ row[item.field] || row[item.field] == 0 ? formatParkDuration(row[item.field]) : "-" }}
          </span>
          <span v-else-if="['parkBte', 'parkEte', 'sparkBte', 'sparkEte'].includes(item.field)">
            {{ formatTime(row[item.field]) }}
          </span>
          <span v-else>
            {{ row[item.field] || row[item.field] == 0 ? row[item.field] : "-" }}
          </span>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<style lang="scss" scoped>
.el-table__cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-table--border th,
.el-table--border td {
  border-right: 1px solid #ebeef5;
}
</style>
